<script>
    $(function () {
        // 保存原生的overviewsform
        var originOverviews = {}
        for (var i = 0; i < $('#overviews-form')[0].elements.length; i ++) {
            if ($('#overviews-form')[0].elements[i].checked) {
                originOverviews[$('#overviews-form')[0].elements[i].name] = true
            }
        }
        var selected = {}
        // 获取变化值
        $("#overviews-form").on("click", function (e) {
            // input 标签
            if (e.target.nodeType === 1 && e.target.getAttribute('type') === 'checkbox') {
                var name = e.target.getAttribute('name')
                var checked = e.target.checked
                if (checked) {
                    selected[name] = true
                } else {
                    selected[name] = false
                }
            }
        });
        // 提交
        $('#overviews-submit').on('click', function() {
            $.ajax({
                url: 'manage/user/overviews',
                method: 'PUT',
                data: JSON.stringify({
                    overviews: selected,
                    username: "Tsdy",
                }),
                contentType: 'application/json',
                success(res) {
                    if (res.code === 20000) {
                        location.href = location.href
                        // Object.assign(originOverviews, selected)
                    } else {
                        alert(res.message)
                    }
                }
            })
        })
        // 关闭overviews
        $('#overviews-exit').on('click', function() {
            $("#overviews-details")[0].open = false
        })
        // 开启overviews
        $('#overviews-up').on('click', function() {
            for (var i = 0; i < $('#overviews-form')[0].elements.length; i ++) {
                var element = $('#overviews-form')[0].elements[i]
                if (originOverviews[element.name]) {
                    element.checked = true
                } else {
                    element.checked = false
                }
            }
        })
    });
</script>
<div class="mt-4 clearfix">
    <h2 class="f4 text-normal float-left">Pinned</h2>
    {% if user.session %}
    <details id="overviews-details" class="details-reset details-overlay details-overlay-dark">
        <summary id="overviews-up" class="btn-link Link--muted float-right" aria-haspopup="dialog">
            Customize your pins
        </summary>
        <style>
            details-dialog {
                position: fixed;
                top: 50%;
                z-index: 111;
                left: 50%;
                transform: translate3d(-50%, -50%, 0);
                max-height: 80vh;
                max-width: 448px;
                min-width: 300px;
                width: 80%;
            }
        </style>
        <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast">
            <div class="Box-header">
                <button id="overviews-exit" class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog"
                    data-close-dialog>
                    <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z">
                        </path>
                    </svg>
                </button>
                <h3>Edit pinned items</h3>
                <p class="color-fg-muted mb-0">
                    Select up to six public repositories or gists you’d like to show.
                </p>
            </div>
            <div class="overflow-auto">
                <div class="Box-body overflow-auto">
                    <input class="form-control input-block" type="text" placeholder="Filter repositories and gists"
                        aria-label="Filter repositories and gists" />
                </div>
                <div class="Box-body overflow-auto">
                    <form id="overviews-form" action="{{ user.username }}" method="POST">
                        <ul class="list-style-none">
                            {% for item in repos %} 
                            {% set is_checked = '' %}
                            {% if item.is_overviews %} 
                                {% set is_checked = 'checked' %} 
                            {% endif %}
                            <li class="list-style-none d-flex flex-items-center p-2">
                                <input id="{{ item.name }}" name="{{ item.name }}" class="flex-shrink-0"
                                    type="checkbox" {{ is_checked }} />
                                <label for="{{ item.name }}" class="d-flex flex-items-center ml-1 width-full">
                                    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                                        data-view-component="true" class="octicon octicon-repo flex-shrink-0">
                                        <path fill-rule="evenodd"
                                            d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z">
                                        </path>
                                    </svg>
                                    <p class="ml-1 mb-0 text-bold width-full flex-1">
                                        {{ item.name }}
                                    </p>
                                    <p class="flex-shrink-0 mb-0">
                                        <span>0</span>
                                        <svg aria-label="stars" role="img" height="16" viewBox="0 0 16 16" version="1.1"
                                            width="16" data-view-component="true" class="octicon octicon-star">
                                            <path fill-rule="evenodd"
                                                d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z">
                                            </path>
                                        </svg>
                                    </p>
                                </label>
                            </li>
                            {% endfor %}
                        </ul>
                    </form>
                </div>
            </div>
            <div class="Box-footer clearfix">
                <button id="overviews-submit" type="button" class="btn btn-primary float-right" data-close-dialog>
                    Save pins
                </button>
            </div>
        </details-dialog>
    </details>
    {% endif %}
</div>

<ol class="d-flex flex-wrap list-style-none">
    {% for item in overviews %}
    <li class="p-1 col-6 list-style-none">
        <div class="p-4 d-flex Box height-full flex-column">
            <div class="d-flex">
                <div class="flex-1">
                    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                        data-view-component="true" class="octicon octicon-repo mr-1 color-fg-muted">
                        <path fill-rule="evenodd"
                            d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z">
                        </path>
                    </svg>
                    <a href="{{ item.url }}" class="text-bold mr-2">{{ item.name }}</a>
                    {% if item.type === "public" %}
                    <span class="Label Label--large Label--gray-darker mr-1">Public</span>
                    {% endif %}
                </div>
            </div>
            <p class="mt-2 mb-3 color-fg-muted flex-1 text-small">
                {{ item.description }}
            </p>
            <p class="mb-0 color-fg-muted">
                {{ repo_language(item.language.name, item.language.color) }}
            </p>
        </div>
    </li>
    {% endfor %}
</ol>
<!-- <p class="f3 mt-5">0 contributions in the last year</p>
<div class="Box px-3 py-2 mt-1">{# {% include "public/calendar.njk" %} #}</div> -->